<template>
  <div>
      <h2>vuex</h2>
      <ul>
          <li v-for="item in hotMovies">
              {{item.title}}
          </li>
      </ul>
      <button type="button" @click="onClick()" ref="dirForm">点击</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "MoviePage",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      hotMovies: state => state.movie.hotMovies,
      topMovies: state => state.movie.topMovies,
      newMovies: state => state.movie.newMovies,
      movieTags: state => state.movie.movieTags,
      hotBooks: state => state.book.hotBooks
    }),
     // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'book/doneTodos',
      // ...
    ])
  },

  methods: {
    // Dispatching getMovie
    getMovie: function() {
      console.log(this.$store);
      console.log(this.hotBooks);
      this.$store.dispatch("getMovie"); // 直接触发 action
    },
    onClick: function() {
      console.log(this);
      // console.log(this.$store);
      // console.log(this.hotMovies);
      // console.log(this.hotBooks);
      //-------------------book---------------------------------
      // commit
      this.$store.commit("book/increment");
      // console.log(this.$store.state.book.count);
      // getter
      console.log(this.$store.getters['book/doneTodos']);
      console.log(this['book/doneTodos']);
    }
  },

  created() {
    // Getting movies data on created
    this.getMovie();
  },
};
</script>

